Font Awesome图标安装及使用方法

您所在的位置:网站首页 font awesome 图标怎么用 Font Awesome图标安装及使用方法

Font Awesome图标安装及使用方法

2023-10-02 01:34| 来源: 网络整理| 查看: 265

fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 今天烽烟就来介绍下fontawesome图标的安装方法及使用方法。

Font Awesome 特性

479个图标:只需一种字体,同时拥有多个图标 无需JavaScript:Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性 解决方案:可无限放大缩小,使用和普通字体一样自由便捷,可任意缩放 完全免费:完全免费,可以用于商业用途, SIL OFL 1.1 协议 CSS可控性:通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 完全兼容视网膜屏:由于fontawesome是矢量字体,可以完全兼容视网膜屏 良好兼容性:能和Bootstrap等常用UI框架一起使用,奥森(Font Awesome中文)兼容IE7+ 桌面应用:可以用于桌面应用中 兼容屏幕阅读器:不像其它字体那样, 它可以兼容屏幕阅读器。

Font Awesome图标安装及使用方法

安装

1.下载Font Awesome最新安装包。 2.在 标签 里, 引入 font-awesome.min.css.(具体路径是你的情况而定)

只需要这两步你就可以在主题中调用fontawesome图标了,对于使用烽烟主题的朋友可以忽略这部。

使用

引入fontawesome以后,你可以把标签用在各个地方!

1.例如基本图标:复制以下代码到你的html里

 fa-camera-retro

你可以通过css控制图标的font-size,color,阴影等

2.Larger Icons:你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or fa-5x 这些类等比缩放图标大小.

 fa-lg fa-2x fa-3x fa-4x fa-5x

如果发现图标上下有被隐藏的情况,你可以通过适当增加 line-height来解决.

3.固定宽度图标:使用 fa-fw可以固定图标宽度

 ; Home ; Library ; Applications ; Settings 

4.列表图标:使用 fa-ul and fa-li 如下

 List icons can be used as bullets in lists 

5.有边框 & 漂浮 图标:fa-border 和 pull-right 或者 pull-left 组合使用

...tomorrow we will run faster, stretch out our arms farther...And then one fine morning— So we beat on, boats against thecurrent, borne back ceaselessly into the past.

6.旋转图标:fa-spin 和 fa-spinner, fa-refresh, fa-cog组合

   

只支持IE10+7.翻转图标

 normal  fa-rotate-90  fa-rotate-180  fa-rotate-270  fa-flip-horizontal  icon-flip-vertical

8.叠加图标

   fa-twitter on fa-square-o    fa-flag on fa-circle    fa-terminal on fa-square    fa-ban on fa-camera



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3